<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin:0;padding:0;}
  </style>
</head>
<body>
  
</body>
<script type="importmap">
  {
		"imports": {
			"three": "../build/three.module.js",
      "OrbitControls": "../examples/jsm/controls/OrbitControls.js",
      "gui":"../examples/jsm/libs/lil-gui.module.min.js"
		}
	}
</script>
<script type="module">
  import * as THREE from 'three';
  // 引入相机轨道控制器
  import { OrbitControls } from 'OrbitControls';
  import { GUI } from 'gui';

  // 创建场景
  const scene = new THREE.Scene()

  // 创建透视相机：具备近大远小
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // =========

  // 创建一个几何体
  const geometry = new THREE.BoxGeometry(10, 1, 10);

  // 创建纹理加载器
  const textLoader = new THREE.TextureLoader();
  // 通过加载一个图片来得到一个纹理
  const texture = textLoader.load('../assets/floor.jpg');

  // 设置阵列模式
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  //注意选择合适的阵列数量
  texture.repeat.set(10, 10);

  // 设置材质
  const material = new THREE.MeshBasicMaterial({
    // 使用指定的纹理对象来渲染我们的模型
    map: texture,
    side: THREE.DoubleSide
  })

  // 创建网格模型，将立方体和材质组合起来
  const cube = new THREE.Mesh(geometry,material );
  // 把网格模型 添加到场景中
  scene.add(cube);

  // 透明贴图
  const lpgeometry = new THREE.PlaneGeometry(1, 1);
  const lpmaterial = new THREE.MeshBasicMaterial({
    map: textLoader.load('../assets/指示牌.png'),
    side: THREE.DoubleSide,
    //如果需要保持贴图的透明性  需要开启透明属性
    transparent: true,
  })
  const lp = new THREE.Mesh( lpgeometry , lpmaterial);
  scene.add(lp);
  lp.position.y = 1;

  // =========


  // 修改相机位置
  camera.position.z = 5;

  // 创建坐标系辅助器
  const axesHelper = new THREE.AxesHelper(150);
  scene.add(axesHelper);
  // 创建辅助线（地面）
  const gridHelper = new THREE.GridHelper(10,10);
  scene.add(gridHelper);

  // // 创建光源
  // const pointLight = new THREE.PointLight(0xffffff, 1.0);
  // // 设置位置
  // pointLight.position.set(100, 20, 20);
  // scene.add(pointLight);
  // // 创建光源辅助器
  // const pointLightHelper = new THREE.PointLightHelper(pointLight, 20);
  // scene.add(pointLightHelper);

  // 将3D场景和相机都添加到渲染器中（在canvas内绘制）
  renderer.render( scene, camera );

  // 创建 相机控件轨道控制器 实例
  const controls = new OrbitControls( camera, renderer.domElement );
  // 监听相机轨道改变事件
  controls.addEventListener('change',()=>{
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    // 执行渲染操作
    renderer.render(scene, camera);
  })


  const gui = new GUI()
  const obj = { xr:0, yr:0, zr:0 };
  gui.add(obj, "xr", 0, 1).onChange(()=>{
    geometry.rotateX(obj.xr);
    // 执行渲染操作
    renderer.render(scene, camera);
  });
  gui.add(obj, "yr", 0, 1).onChange(()=>{
    geometry.rotateY(obj.yr);
    // 执行渲染操作
    renderer.render(scene, camera);
  });
  gui.add(obj, "zr", 0, 1).onChange(()=>{
    geometry.rotateZ(obj.zr);
    // 执行渲染操作
    renderer.render(scene, camera);
  });

</script>
</html>